<template>
  <div class="curve"
    >
    <div class="curve-bg">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <div class="todayDeduction text-center" @click="deduction()">
              <span><i class="fa fa-rmb"></i>{{Number(today.deduction  || 0).toFixed(2)}}</span>
              <small>扣费(元)</small>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple-light" @click="cash()">
            <div class="todayCash text-center">
              <span><i class="fa fa-rmb"></i>{{Number(today.cash || 0).toFixed(2)}}</span>
              <small>现金(元)</small>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple-light" @click="charge()">
            <div class="todayCharge text-center">
      				<span><i class="fa fa-rmb"></i>{{Number(today.charge || 0).toFixed(2)}}</span>
      				<small>充值(元)</small>
      			</div>
          </div>
        </el-col>
      </el-row>

    </div>
    <div class="table-view curve-table">
    	<canvas id="myChart" ></canvas>
    </div>
</div>
</template>

<script>
  import moment from 'moment';
  import chart from '../../util/Chart.min.js';
  export default {
     data: function () {

          return {
             line: '',
             cashData : [],
             chargeData : [],
             deductionData : [],
             dateData : [],
             today:'',
             loading: true
          }
      },
      created: function () {
        console.log("======================>created");
         this.readToday();
         this.readLine();
      },

      mounted: function () {
        console.log("==================>++++++++++++++++mounted");

      },
      methods: {
        readToday: function () {
          this.loading = true;
          let currentDate = new Date();
          var self = this;
          var args ={
                "bizDate": moment(currentDate).format('YYYY-MM-DD')
            };
          console.log(args);
          this.$axioxs({
               method: 'get',
               url: '/Income/?bizDate='+args.bizDate
            })
          .then(function (res) {
              console.log(JSON.stringify(res.data));
              console.log(res.data);

              if(res.data.records.length != 0){
                self.today = res.data.records[0];
              }

              console.log(self.today);

              self.loading = false;
          })
          .catch(function (error) {
            console.log(error);
            self.loading = true;
          });

        },
        readLine: function () {
          this.loading = true;
          var self = this;
          this.$axioxs({
               method: 'get',
               url: '/Income/'
            })
          .then(function (res) {
              console.log(JSON.stringify(res.data));
              console.log(res.data);
              self.line = res.data.records;
              self.loading = false;

              for(var i= 0; i<self.line.length; i++){
                self.cashData.push(self.line[i].cash);
                self.chargeData.push(self.line[i].charge);
                self.deductionData.push(self.line[i].deduction);
                var date = moment(self.line[i].bizDate).format("MM-DD");
                console.log(date);
                self.dateData.push(date);
              }

              console.log(self.cashData);
              console.log(self.chargeData);
              console.log(self.deductionData);
              console.log(self.dateData);

              self.create_chart();


          })
          .catch(function (error) {
            console.log(error);
            self.loading = true;
          });
        },
        create_chart: function(){
          console.log("==================>create_chart");
          var ctx = document.getElementById("myChart");

          var cashD = this.cashData.slice(0,7).reverse();
          var deductionD = this.deductionData.slice(0,7).reverse();
          var chargeD = this.chargeData.slice(0,7).reverse();
          var dateD = this.dateData.slice(0,7).reverse();

          console.log(cashD);
          console.log(deductionD);
          console.log(chargeD);
          console.log(dateD);

          var myChart = new Chart(ctx, {
              type: 'line',
              data: {
              labels: dateD,
              datasets: [
                  {
                      label: "现金",
                      lineTension:0,
                      backgroundColor: "rgba(66,66,86,0.4)",
                      borderWidth:1,
                      borderColor: "rgba(66,66,86,0.4)",
                      pointBackgroundColor: "rgba(66,66,86,0.4)",
                      pointBorderColor: "rgba(255,255,255,1)",
                      pointHoverBackgroundColor: "rgba(66,66,86,0.4)",
                      pointHoverBorderColor: "rgba(66,66,86,0.4)",
                      pointHoverRadius: 4,
                      data: cashD
                  },
                  {
                      label: "扣费",
                      lineTension:0,
                      borderWidth:1,
                      backgroundColor: "rgba(177,114,82,0.4)",
                      borderColor: "rgba(177,114,82,0.4)",
                      pointBackgroundColor: "rgba(177,114,82,0.4)",
                      pointBorderColor: "rgba(255,255,255,1)",
                      pointHoverBackgroundColor: "rgba(177,114,82,0.4)",
                      pointHoverBorderColor: "rgba(177,114,82,0.4)",
                      pointHoverRadius: 4,
                      data: deductionD
                  },
                  {
                      label: "充值",
                      lineTension:0,
                      borderWidth:1,
                      backgroundColor: "rgba(158,15,19,0.8)",
                      borderColor: "rgba(158,15,19,1)",
                      pointBackgroundColor: "rgba(158,15,19,0.5)",
                      pointBorderColor: "rgba(255,255,255,1)",
                      pointHoverBackgroundColor: "rgba(158,15,19,1)",
                      pointHoverBorderColor: "rgba(158,15,19,1)",
                      pointHoverRadius: 4,
                      data: chargeD
                  }


              ]
          },
              options: {
                  scales: {
                      yAxes: [{
                          ticks: {
                              beginAtZero:true
                          }
                      }]
                  }
              }
          });
        },

        deduction:function () {
          console.log("==================>deduction");
          this.$router.push({
            path:'/deduction',
            query:{
              type:'deduction'
            }
          });
        },
        cash: function () {
          console.log("==========>cash");

          this.$router.push({
            path:'/cash',
            query:{
              type:'cash'
            }
          });

        },
        charge: function () {
          console.log("==========>charge");

          this.$router.push({
            path:'/charge',
            query:{
              type:'charge'
            }
          });

        },
        commission: function () {
          console.log("==========>commission提成");
          this.$router.push({
            path:'/report'
          });

        },
        bought: function () {
          console.log("==========>bought已购");

          this.$router.push({
            path:'/bought'
          });

        }
      }

  }
</script>

<style scoped>
.item02, .item04{
  border-right: 1px solid #ccc;
  padding-bottom: 5px;
}
</style>
